import React, {Component} from 'react';
import {Modal} from "antd";
import {InfoCircleOutlined} from '@ant-design/icons';
import {inject, observer} from "mobx-react";
import "./index.css"
import GlobalStore from "../../stores/GlobalStore";

interface AuthenticateProps {
    globalStore?: GlobalStore;
    Confirm?: any;
}
/*确认弹窗*/
@inject("globalStore")
@observer
class AuthenticateModal extends Component<AuthenticateProps, any> {
    constructor(props) {
        super(props);
    }

    onCancel() {
        this.props.globalStore.updateShowAuthModalVisible(false);
    }

    onOK() {
        this.props.Confirm();
        this.props.globalStore.updateShowAuthModalVisible(false);
    }

    render() {
        return (
            <div>
                <Modal onCancel={this.onCancel.bind(this)}
                       className="auth-modal"
                       footer={null}
                       visible={this.props.globalStore.showAuthModal}
                       width="5.44rem"
                       closable={false}
                       bodyStyle={{
                           height: "2.66rem",
                           backgroundColor: "#ffffff00"
                       }}>
                    <div className="auth-modal-back">
                        <div className="auth-modal-body">
                            <InfoCircleOutlined style={{color: "#efab1a"}}/>
                            <span style={{
                                marginLeft: "0.18rem",
                                fontSize: "0.24rem",
                                color: "#333333",
                                marginTop: "-0.08rem"
                            }}>
                                您还没有认证身份信息，现在去认证？
                            </span>
                        </div>
                        <div className="auth-modal-buttons">
                            <button onClick={this.onCancel.bind(this)}>取消</button>
                            <button onClick={this.onOK.bind(this)}>确定</button>
                        </div>
                    </div>
                </Modal>
            </div>
        );
    }
}

export default AuthenticateModal;